<template>
  <div>
    <el-form :inline="true" :model="applyForm" class="demo-form-inline">
      <el-form-item label="实验室名称">
        <el-input v-model="applyForm.name"></el-input>
      </el-form-item>
      <el-form-item label="实验室楼号：">
        <el-select v-model="applyFormHouse" placeholder="请选择">
          <el-option
            :label="item"
            :value="item"
            v-for="(item,index) in applyForm.house"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="实验室类别：">
        <el-select v-model="applyFormType" placeholder="请选择">
          <el-option
            :label="item"
            :value="item"
            v-for="(item,index) in applyForm.type"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-form-item class="add">
        <el-button type="primary" @click="dialogFormVisibleAdd = true">添加</el-button>
      </el-form-item>
    </el-form>

    <!-- <el-button type="primary" @click="dialogFormVisibleAdd = true">添加</el-button> -->

    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width:100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-for="(value,name,index) in tableDatas"
        :key="index"
        :prop="name"
        :label="value"
        width="125"
      ></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" >申请</el-button> -->
           <el-button
             @click="handleEdit(scope.$index, scope.row);dialogVisibleuse = true;querylabuse"
          >使用情况</el-button>
          <el-button
            @click="dialogFormVisible = true;handleEdit(scope.$index, scope.row)"
            type="primary"
          >编辑</el-button>

          <el-button
            type="danger"
            @click="dialogVisible = true;handleEdit(scope.$index, scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="实验室信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="实验室ID" :label-width="formLabelWidth">
          <el-input v-model="form.labId" autocomplete="off" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="实验室名称" :label-width="formLabelWidth">
          <el-input v-model="form.labName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="实验室位置" :label-width="formLabelWidth">
          <el-input v-model="form.labPosition" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="座位数" :label-width="formLabelWidth">
          <el-input v-model="form.labSite" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="最大容纳量" :label-width="formLabelWidth">
          <el-input v-model="form.labMaxUser" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="实验室楼号" :label-width="formLabelWidth">
          <div class="bStyle">
            <el-select v-model="applyFormHouse" placeholder="请选择">
              <el-option
                :label="item"
                :value="item"
                v-for="(item,index) in applyForm.house"
                :key="index"
              ></el-option>
            </el-select>
            <el-input v-model="form.labHouse" autocomplete="off" readonly="readonly"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="实验室类别" :label-width="formLabelWidth">
          <div class="bStyle">
            <el-select v-model="applyFormType" placeholder="请选择">
              <el-option
                :label="item"
                :value="item"
                v-for="(item,index) in applyForm.type"
                :key="index"
              ></el-option>
            </el-select>
            <el-input v-model="form.labType" autocomplete="off" readonly="readonly"></el-input>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitApplication">确认修改</el-button>
      </div>
    </el-dialog>

    <el-dialog title="实验室信息" :visible.sync="dialogFormVisibleAdd">
      <el-form :model="form">
        <el-form-item label="实验室ID" :label-width="formLabelWidth">
          <el-input v-model="form.labId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="实验室名称" :label-width="formLabelWidth">
          <el-input v-model="form.labName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="实验室位置" :label-width="formLabelWidth">
          <el-input v-model="form.labPosition" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="座位数" :label-width="formLabelWidth">
          <el-input v-model="form.labSite" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="最大容纳量" :label-width="formLabelWidth">
          <el-input v-model="form.labMaxUser" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="实验室楼号" :label-width="formLabelWidth">
          <div class="bStyle">
            <el-select v-model="applyFormHouse" placeholder="请选择">
              <el-option
                :label="item"
                :value="item"
                v-for="(item,index) in applyForm.house"
                :key="index"
              ></el-option>
            </el-select>
            <el-input v-model="applyFormHouse" autocomplete="off" readonly="readonly"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="实验室类别" :label-width="formLabelWidth">
          <div class="bStyle">
            <el-select v-model="applyFormType" placeholder="请选择">
              <el-option
                :label="item"
                :value="item"
                v-for="(item,index) in applyForm.type"
                :key="index"
              ></el-option>
            </el-select>
            <el-input v-model="applyFormType" autocomplete="off" readonly="readonly"></el-input>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleAdd = false">取 消</el-button>
        <el-button type="primary" @click="addlab">确认添加</el-button>
      </div>
    </el-dialog>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>确定删除此实验室么？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="deletelab">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="使用情况" :visible.sync="dialogVisibleuse" width="50%">
      <span>
     <div class="waitQuerys">
      <div v-for="(item,index) in querylabapply" :key="index">
        <div @click="query(item)" class="waitQuery">待使用</div>
      </div>
    </div>
    </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleuse = false">取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </span>
    </el-dialog>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      background
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="count"
    ></el-pagination>
  </div>
</template>

<script>
import { querylab, addlab, modifylab, deletelab, querylabuse } from "@/api/teacher/labAdministration.js";
import {
  applyForm,
  // freeLaboratory,
} from "@/api/laboratoryApply/laboratoryApply.js";
import axios from "axios";

export default {
  data() {
    return {
      applyForm: {
        name: "",
        type: [],
        house: [],
      },

      applyFormType: "",
      applyFormHouse: "",

      tableData: [],
      tableDatas: {
        labId: "ID",
        labName: "名称",
        labPosition: "位置",
        labHouse: "楼号",
        labMaxUser: "最大容纳",
        labSite: "座位数",
        labType: "实验室类型",
        labStatus: "状态",
      },

      currentPage: 1,
      pageSize: 5,
      count: 10,
      pageSizes: [5, 10],

      dialogFormVisible: false,
      dialogFormVisibleAdd: false,

      dialogVisible: false,
      dialogVisibleuse: false,

      form: {
        labId: "",
        labName: "",
        labPosition: "",
        labHouse: "",
        labSite: "",
        labMaxUser: "",
        labType: "",
        labQuery: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
      querylabapply: [],
    };
  },
  mounted() {
    applyForm({}).then((response) => {
      this.applyForm.house = response.data.house;
      this.applyForm.type = response.data.type;
    });

    querylab({
      data: {
        labName: "",
        labType: "",
        labHouse: "",
        labStatus: "",
      },
      page: this.currentPage,
      limit: this.pageSize,
    }).then((response) => {
      for (let i = 0; i < response.data.length; i++) {
        if (response.data[i].labStatus == 0) {
          response.data[i].labStatus = "正常";
        }else{
               res.data[i].labStatus = "废除";
        }
      }

      this.tableData = response.data;
      this.count = response.count;
    });
  },
  methods: {
    onSubmit() {
      querylab({
        data: {
          labName: this.applyForm.name,
          labType: this.applyFormType === '全部'? '':this.applyFormType,
          labHouse: this.applyFormHouse === '全部'? '':this.applyFormHouse,
          labStatus: "",
        },
        page: this.currentPage,
        limit: this.pageSize,
      }).then((res) => {
        //这里就写成功后的操作
        if (res.code == 0) {
          for (let i = 0; i < res.data.length; i++) {
            if (res.data[i].labStatus == 0) {
              res.data[i].labStatus = "正常";
            }else{
               res.data[i].labStatus = "废除";
            }
          }

          this.tableData = res.data;
          this.count = res.count;
          this.handleCurrentChange();
        }
      });
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      console.log(this.pageSize);
    },
    handleCurrentChange(val) {
      this.currentPage = val || 1;
      console.log(this.currentPage);
      querylab({
        data: {
          labName: this.applyForm.name,
          labType: this.applyFormType === '全部'? '':this.applyFormType,
          labHouse: this.applyFormHouse === '全部'? '':this.applyFormHouse,
          labStatus: "",
        },
        page: this.currentPage,
        limit: this.pageSize,
      }).then((response) => {
        //这里就写成功后的操作
        if (response.code == 0) {
          for (let i = 0; i < response.data.length; i++) {
            if (response.data[i].labStatus == 0) {
              response.data[i].labStatus = "正常";
            }else{
               response.data[i].labStatus = "废除";
            }
          }

          this.tableData = response.data;
          this.count = response.count;
        }
      });
    },

    handleEdit(index, row) {
      console.log(index, row);
      this.form.labId = row.labId;
      this.form.labName = row.labName;
      this.form.labPosition = row.labPosition;
      this.form.labSite = row.labSite;
      this.form.labMaxUser = row.labMaxUser;
      this.form.labType = row.labType;
      this.form.labHouse = row.labHouse;

       querylabuse({
        data: {
          labId: this.form.labId
        },
      }).then((res) => {
          this.querylabapply = res.data;
          //这里就写成功后的操作
          // this.$message({
          //   message: res.data.msg,
          //   type: "success",
          // });
        });

    },
    submitApplication() {
      modifylab({
        data: {
            labId: this.form.labId,
            labName: this.form.labName,
            labPosition: this.form.labPosition,
            labHouse: this.form.labHouse,
            labMaxUser: this.form.labMaxUser,
            labSite: this.form.labSite,
            labType: this.form.labType,
            labStatus: 0,
          },
      }).then((res) => {
          console.log(res);
          //这里就写成功后的操作
          this.$message({
            message: res.data.msg,
            type: "success",
          });
        });
    },

    addlab() {
      addlab({
        data: {
            labId: this.form.labId,
            labName: this.form.labName,
            labPosition: this.form.labPosition,
            labMaxUser: this.form.labMaxUser,
            labSite: this.form.labSite,
            labType:  this.applyFormType,
            labHouse: this.applyFormHouse,
            labStatus: 0,
          },
      }).then((res) => {
          console.log(res);
          //这里就写成功后的操作
          if (res.data.code==0) {
              this.$message({
            message: res.data.msg,
            type: "success",
          });
          }else{
               this.$message({
            message: res.data.reason,
            type: "error",
          });
          }
          
        });
    },
    deletelab() {
      deletelab({
          data: {lab_id:this.form.labId},
        }).then((res) => {
          console.log(res);
          //这里就写成功后的操作
          this.$message({
            message: res.data.msg,
            type: "success",
          });
        });
    },
    querylabuse(){
      querylabuse({
        data: {
          labId: this.form.labId
        },
      }).then((res) => {
          this.querylabapply = res.data.data;
          //这里就写成功后的操作
          // this.$message({
          //   message: res.data.msg,
          //   type: "success",
          // });
        });
    }
  },
};
</script>

<style lang="scss" scoped>
.add {
  padding-left: 200px;
  
}
.bStyle {
  display: flex !important;
}
.bStyle:first {
  width: 150px !important;
}
table tr td{
  width: 80px;
}
.waitQuerys {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  .waitQuery {
    padding: 10px;
    width: 50px;
    height: 25px;
    border-radius: 5px;
    border: 1px solid #bbbbbb;
    background-color: #009688;
    box-shadow: 0 5px 5px #5fb878;
    // #5FB878
    margin: 20px;
    cursor: pointer;
  }
}
</style>